import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Link } from 'react-router';
import { Carousel, Grid, ListView, Icon } from 'antd-mobile';
import Ajax from 'lib/Ajax';
import List from 'mixin/list'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends Component {
	constructor(props) {
    super(props);

    this.state = {
			bannerList: [],
      schoolList: [],
      experienceList: []
    }
  }

  componentDidMount(){
    this.fetchSchool();
		this.fetchExperience();
    this.fetchBanner();
  }

  fetchBanner = ()=>{
    const self = this;
    Ajax({
      url: '/bannerimg/list',
      data: {
        bannerType: 10
      },
      success: function(result){
        self.setState({
          bannerList: result
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

  fetchSchool = ()=>{
    const self = this;
    Ajax({
      url: '/school/list',
      data: {
        currentPage: 1,
        perPage: 4
      },
      success: function(result){
        self.setState({
          schoolList: result.list
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

  fetchExperience = ()=>{
    const self = this;
    Ajax({
      url: '/experience/list',
      data: {
        currentPage: 1,
        perPage: 4
      },
      success: function(result){
        self.setState({
          experienceList: result.list
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

	renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/school/${rowData.schoolId}`}>
            <img src={`${imgBaseUrl}${rowData.listImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.name}</div>
              <div className="b">
                {this.props.appStore.getNameById('countryEn', rowData.countryId)}
              </div>
            </div>
          </Link>
        </div>
      );
  }

  render() {
    const homeData = this.props.languageStore.getPageData('home');
		const { imgBaseUrl, commonData } = this.props.appStore;

    return (
    	<div className="home">
        <Carousel
          className="slider"
          autoplay={false}
          infinite
          selectedIndex={1}
          swipeSpeed={35}
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {this.state.bannerList.map((ii, index) => (
            <Link to={ii.url} key={index}>
              <img
                src={`${imgBaseUrl}${ii.imagePath}`}
              />
            </Link>
          ))}
        </Carousel>
        <Grid data={homeData.menus}
          renderItem={(dataItem, index) => (
            <Link to={dataItem.link}>
              <div className="grid-a">
                 <i className={`iconfont icon-${dataItem.icon}`} style={{ backgroundColor: dataItem.color, color: '#fff' }}></i>
                  <span>{ dataItem.title }</span>
              </div>
            </Link>
          )}
        />
        <div className="warden-list">
          <h3 className="title"><Link to="/school"><i>更多留学目的地</i><i className="iconfont icon-right"></i></Link>留学目的地</h3>
          <div className="list-con-img">
            <Link to='/schoolAddress/50'><img src="/resources/page/image/dist-1.png" /></Link>
            <Link to='/schoolAddress/60'><img src="/resources/page/image/dist-2.png" /></Link>
            <Link to='/schoolAddress/20'><img src="/resources/page/image/dist-3.png" /></Link>
            <Link to='/schoolAddress/30'><img src="/resources/page/image/dist-4.png" /></Link>
          </div>
        </div>
        <div className="warden-list">
          <h3 className="title"><Link to="/experience"><i>更多热门分享</i><i className="iconfont icon-right"></i></Link>热门分享</h3>
          <div className="list-con clearfix">
            {
              this.state.experienceList.map((item, index) => {
                return <div className="list-item" key={index}>
                  <Link to={`/experience/${item.experienceId}`}>
                    <img src={`${imgBaseUrl}${item.listImg}`} alt=""/>
                    <p className="desc">{item.title}</p>
                  </Link>
                </div>
              })
            }
          </div>
        </div>
        <div className="warden-list">
          <h3 className="title"><Link to="/school"><i>更多热门高校</i><i className="iconfont icon-right"></i></Link>热门高校</h3>
          <div className="list-con clearfix">
            {
              this.state.schoolList.map((item, index) => {
                return <div className="list-item" key={index}>
                  <Link to={`/school/${item.schoolId}`}>
                    <img src={`${imgBaseUrl}${item.listImg}`} alt=""/>
                    <p className="desc">{item.name}</p>
                  </Link>
                </div>
              })
            }
          </div>
        </div>
    	</div>
    )
  }
}

module.exports = ModuleName
